// 1. 导入
import React from 'react'
import './iconfong.css'
// import './one.scss'
// import './one.module.scss'
// css in js
import styles from './one.module.scss'
console.log('one:', styles)

// 2. 创建
class One extends React.Component {
  render() {
    return (
      <div>
        <h1 className={styles.red}>我是one的h1</h1>
        {/* <p className={styles.fz}>pppp</p> */}
        {/* 1. 使用类 */}
        {/* <div id={styles.box}>w shi div</div> */}
        <div className={styles.navBar}>绿色</div>
        {/* 2. .nav-bar styles['nav-bar'] */}
        <div className={styles['nav-bar']}>紫色</div>
        {/* 3. 字体图标本来就是全局的, 不能改的  antd iconfont */}
        {/* 正常的 */}
        <i className="iconfont icon-ditu"></i>
        {/* 不正常 */}
        {/* <i className="iconfont one_icon-ditu__1aC9g"></i>
        <i className={'iconfont ' + styles['icon-ditu']}></i> */}
        {/* 4. 多个类名 */}
        {/* <div className="red fz">哈哈</div> */}
        {/* <div className={ [styles.red,styles.fz].join(' ')  }>哈哈</div> */}
        <div className={styles.red + ' ' + styles.fz}>哈哈</div>
      </div>
    )
  }
}

// 3. 导出
export default One


// .one {
//     .red{}
// }

// .two {
//     .red 
// }

